<script setup>
	import { ref } from 'vue'
	import { addPatientApi, patientDetailApi, updatePatientApi } from '@/apis/patient'
	import { onShow, onLoad } from '@dcloudio/uni-app'

	/**
	 * 1. 根据接口定义数据
	 * 2.绑定给 form，及表单元素
	 * 3.设置 name 属性
	 * 4.form 表单用 ref 进行绑定
	 * 5.点击保存时，校验数据
	 *
	 */

	let id = ''
	const formData = ref({
		name: '',
		idCard: '',
		defaultFlag: 1,
		gender: 0,
	})
	const form = ref()
	// 修改是否默认
	const changeDefault = () => {
		formData.value.defaultFlag = formData.value.defaultFlag === 1 ? 0 : 1
	}

	// 校验规则
	const formRules = {
		name: {
			// 名字
			rules: [
				{ required: true, errorMessage: '请填写患者姓名' },
				{
					pattern: '^[\u4e00-\u9fa5]{2,5}$',
					errorMessage: '患者姓名为2-5位中文',
				},
			],
		},
		idCard: {
			// 身份证
			rules: [
				{ required: true, errorMessage: '请输入身份证号' },
				{
					pattern:
						'^[1-9]\\d{5}(?:18|19|20)\\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\\d|30|31)\\d{3}[\\dXx]$',
					errorMessage: '身份证号格式不正确',
				},
			],
		},
		gender: {
			// 性别
			rules: [
				{ required: true, errorMessage: '请勾选患者性别' },
				{
					validateFunction: function (rule, value, data, callback) {
						// console.log(rule) // 规则
						// console.log(value) // 当前数据
						// console.log(data) // 总数据
						// console.log(callback) // 回调函数 抛出验证的错误信息
						// if (value.length < 2) {
						// callback('你的性别有问题哦~')
						// }

						// 倒数第二位，单数 男，双数，女
						const index = data.idCard.slice(16, 17)
						// 3 %2 = 1
						// 5 %2 = 1
						// 4 % 2 = 0
						// 6 % 2=0
						if (index % 2 === value) {
							// 取余的结果 和性别的数值相同 没问题，反之有问题
							return true
						}
						callback('性别和身份证号不符，请检查')

						// console.log(index)
						// return true // 成功
					},
				},
			],
		},
	}
	// 提交
	const submitData = async () => {
		await form.value.validate()
		if (id !== '') {
			// 修改
			// 不要直接传递状态变量 需要.value
			// 这个接口不能额外传递参数，多了他会报错
			// id 是保存在全局的，直接获取即可
			await updatePatientApi({
				name: formData.value.name,
				idCard: formData.value.idCard,
				defaultFlag: formData.value.defaultFlag,
				gender: formData.value.gender,
				id, // id: id,
			})
		} else {
			// 新增
			// console.log(formData.value)
			// 执行到这里说明数据校验通过，直接提交即可
			await addPatientApi(formData.value)
		}

		// 返回上一页，会触发 onShow
		uni.navigateBack()
	}

	// 编辑的逻辑
	onLoad(async (query) => {
		// console.log(query)
		// 获取跳转传递而来的参数
		if (query.id) {
			// 编辑
			// 顶部标题
			uni.setNavigationBarTitle({
				title: '修改患者',
			})
			// 调用接口获取数据
			const res = await patientDetailApi(query.id)
			// 保存 id(修改数据的时候需要告诉服务器改的是谁)
			id = res.id
			// 保存数据（更新 UI）
			formData.value = res
		} else {
			// 添加（新增）
		}
	})
</script>

<template>
	<scroll-page>
		<view class="archive-page">
			<uni-forms :rules="formRules" :model="formData" ref="form" border label-width="220rpx">
				<uni-forms-item label="患者姓名" name="name">
					<uni-easyinput
						placeholder-style="color: #C3C3C5; font-size: 32rpx"
						:styles="{ color: '#121826' }"
						:input-border="false"
						:clearable="false"
						placeholder="请填写真实姓名"
						v-model="formData.name"
					/>
				</uni-forms-item>
				<uni-forms-item label="患者身份证号" name="idCard">
					<uni-easyinput
						placeholder-style="color: #C3C3C5; font-size: 32rpx"
						:styles="{ color: '#121826' }"
						:input-border="false"
						:clearable="false"
						placeholder="请填写身份证号"
						v-model="formData.idCard"
					/>
				</uni-forms-item>
				<uni-forms-item label="患者性别" name="gender">
					<!-- text 看到的文字  value 绑定的数据 -->
					<uni-data-checkbox
						v-model="formData.gender"
						selectedColor="#16C2A3"
						:localdata="[
							{ text: '男', value: 1 },
							{ text: '女', value: 0 },
						]"
					/>
				</uni-forms-item>
				<uni-forms-item label="默认就诊人" name="defaultFlag">
					<view class="uni-switch">
						<switch
							:checked="formData.defaultFlag === 1"
							@tap="changeDefault"
							color="#20c6b2"
							style="transform: scale(0.7)"
						/>
					</view>
				</uni-forms-item>
				<button @tap="submitData" class="uni-button">保存</button>
			</uni-forms>
		</view>
	</scroll-page>
</template>

<style lang="scss">
	@import './index.scss';
</style>
